<template>
	<view class="talent">
		<view>
			<u-tabs-swiper  :list="list" ref="tabs" :height="100" :is-scroll="false" :bold="false" :current="current" @change="tabsChange" active-color="#de4f38" :bar-width="80" :bar-height="6"></u-tabs-swiper >
		</view>
		<swiper :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" class="swiper-box" >
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<SampleList :list="talentList" @clickFun="send"></SampleList>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="onreachBottom">
					<SampleList :list="talentList"></SampleList>
				</scroll-view>
			</swiper-item>
		</swiper>
		<u-toast ref="uToast" />
		<u-modal
			v-model="modelShow" 
			width="548"
			:show-title="false"
			show-cancel-button
			border-radius="20"
			cancel-color="#999999"
			confirm-color="#171717"
			confirm="Sample"
			:content="modelContent">
			</u-modal>
			<!--order -->
			<u-modal
				v-model="modelShow1" 
				width="548"
				:show-title="false"
				show-cancel-button
				border-radius="20"
				cancel-color="#999999"
				confirm-color="#171717"
				confirm="Sample"
				:content="modelContent1">
					<view class="sample-box" v-show="order">
						<view class="item mc u-m-b-30 u-p-b-30">
							<view class="lab u-m-b-30 u-font-lg"><text class="xin">*</text>快递公司</view>
							<view class="u-font-lg"><input class="u-font-lg" type="text" placeholder="填写快递公司名称" /></view>
						</view>
						<view class="item">
							<view class="lab u-m-b-30 u-font-lg"><text class="xin">*</text>快递快递单号</view>
							<view><input class="u-font-lg" type="text" placeholder="快递快递单号" /></view>
						</view>
					</view>
				</u-modal>
	</view>
</template>

<script>
	import SampleList from '../components/sample-list/index.vue'
	export default {
		components: {
			SampleList
		},
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待发货'
				}],
				current: 0,
				swiperCurrent: 0, 
				talentList: [
					{
						id: 1,
						title: '名字名字',
						url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
						fans_num: '6.8',
						price: '500',
						location: '杭州'
					},
					{
						id: 2,
						title: '名字名字',
						url: 'http://img3m3.ddimg.cn/69/34/1510438713-1_b_1.jpg',
						fans_num: '6.8',
						price: '500',
						location: '杭州'
					}
				],
				modelShow: false,
				modelShow1:false,
				modelContent: '确认取消该订单吗?',
				modelContent1:'',
				order:false,
			};
		},
		methods: {
			send(e,item){
				console.log(e,item);
				let that = this;
				switch(e) {
				    case 'cancel':
						that.modelContent = '确认取消该订单吗?';
						that.modelShow = true;
				        break;
					case 'details':
						uni.navigateTo({
							url: '/pages/mine/sample/sampleDetails',
						})	
					    break;
				    case 'contact':
						that.modelContent = '确认已发货吗?';
						that.modelShow = true;
				        break;
				    default:
					that.modelContent = '';
					that.order = true;
					that.modelShow1 = true
				} 
			},
			Sample(e){
				console.log(e)
			},
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.tabs.setDx(dx);
			},
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			onreachBottom() {
				
			}
		}
	};
</script>

<style lang="scss" scoped>
.talent {
	display: flex;
	flex-direction: column;
	height: calc(100vh - var(--window-top));
	.swiper-box {
		flex: 1;
		.swiper-item {
			height: 100%;
		}
	}
	.sample-box{
		padding: 40rpx 40rpx 20rpx;
		.item{
			&.mc{ border-bottom:1px solid #999; }
			.lab{
				.xin{ color:#dc1e32; }
			}
		}
	}
	
}
</style>
